<template>
  <div>
    <i-row :gutter="8" style="text-align: center;">
      <i-col span="12">
        <h3>缴费记录</h3>
      </i-col>
      <i-col span="12">
        <h3>转班记录</h3>
      </i-col>
    </i-row>
    <i-row :gutter="8">
      <i-col span="12">
        <i-table border size="small" :columns="classHourColumns" :data="classHourHistories"></i-table>
      </i-col>
      <i-col span="12">
        <i-table border size="small" :columns="classArrangeColumns" :data="classArrangeHistories"></i-table>
      </i-col>
    </i-row>
  </div>
</template>

<script>
import common from "@/common";

export default {
  name: "class-hour-history-row",
  props: {
    studentId: 0
  },
  data: function() {
    return {
      classHourColumns: [
        {
          type: "index",
          width: 60
        },
        {
          title: "操作日期",
          key: "operateDate"
        },
        {
          title: "课时/课次",
          key: "classHour",
          render: (h, params) => {
            return h("span", this.formatClassHour(params.row.classHour));
          }
        },
        {
          title: "缴费金额",
          key: "totalCost",
          render: (h, params) => {
            return h("span", this.formatCost(params.row.cost));
          }
        }
      ],
      classArrangeColumns: [
        {
          type: "index",
          width: 60
        },
        {
          title: "上课日期",
          render: (h, params) => {
            return h("span", this.formatStartDate(params.row.startDate));
          }
        },
        {
          title: "班级编号",
          key: "classNum"
        },
        {
          title: "状态",
          render: (h, params) => {
            return h(
              "span",
              params.row.status === "EFFECTIVE" ? "有效" : "历史"
            );
          }
        }
      ],
      classHourHistories: [],
      classArrangeHistories: []
    };
  },
  created() {
    this.axios.get("/histories/student/" + this.studentId).then(response => {
      if (response.code === 0) {
        this.classHourHistories = response.data.classHourHistories;
        this.classArrangeHistories = response.data.classArrangeHistories;
      } else {
        this.$Message.error("获取缴费及转班历史信息失败。" + response.message);
      }
    });
  },
  methods: {
    formatClassHour(classHour) {
      return common.formatClassHour(classHour);
    },
    formatStartDate(startDate) {
      return common.formatWeekDate(startDate);
    },
    formatCost(cost) {
      return common.formatCost(cost);
    }
  }
};
</script>
